<template>
    <div class="enterprise">
        <div class="enterprise-nav">
            <div class="nav-title" v-for="(v,i) in 2" :key="i">
                企业新闻
            </div>  
        </div>
        <div class="enterprise-list">
            <div class="enterprise-item" v-for="(v,i) in 5" :key="i">
                <div class="enterprise-item-left">
                    <img src="@/assets/img/news1.png" alt="" />
                </div>
                <div class="enterprise-item-right">
                    <div class="name">
                        <h1>第十三届中国国际机器视觉展览会暨机器视觉技术及工业应用研讨会</h1>
                        <p>2022-09-08</p>
                    </div>
                    <div class="brief">
                         10月17日-10月19日第十三届中国国际机器视觉展览会暨机器视觉技术及工业应用研讨会在中国国际展览中心隆重......
                    </div>
                </div>
            </div>
        </div>
        <div class="page-container">
            <div class="pre" :class="[page-1>0?'pageActive':'']" @click="prePage">←</div>
            <div class="page" :class="[page==v?'pageActive':'']" v-for="(v,i) in pageList" :key="i" @click="changePage(v)">
                {{ v}}
            </div>
            <div class="next" :class="[page+1<=this.total?'pageActive':'']"  @click="nextPage">→</div>
        </div>
    </div>
</template>
<script>
export default{
    name:"enterprise",
    data(){
        return{
            total:8,
            page:5,
            pageList:[],
        }
    },
    computed:{
        pageList(){
            // let pagesum = Math.ceil(this.totle / this.pagesize); //总页数随着每页显示数量的改变而改变
            let pagesum = this.total; //总页数随着每页显示数量的改变而改变
            let pageNow = this.page;  //当前的页数
            if (pagesum <= 6) {   //如果总页数小于5，直接返回。
                return pagesum;
            } else {  
            //如果总页数大于5，并且当前页数小于等于4，返回第一种情况的数组，省略号在后面。
                if (pageNow <= 3) {
                return [1, 2, 3, 4,5, "...", pagesum];  
                } else if (pageNow >= pagesum - 2) {  //如果当前页数大于等于总页数减4，返回第三种情况的数组，也就是省略号在前面
                return [
                    1,
                    "...",
                    pagesum - 4,
                    pagesum - 3,
                    pagesum - 2,
                    pagesum - 1,
                    pagesum,
                ];
                } else {
                    //否则的话，就返回第二种情况，前后都有省略号。
                    return [1, "...", pageNow - 1, pageNow, pageNow + 1, "...", pagesum];
                }
            }
        },
    },
    methods:{
        changePage(v){
            if(v==this.page||v=='...') return false;
            this.page = v;
            console.log(v)
        },
        prePage(){
            if(this.page-1<=0) return false;
            this.page--;
        },
        nextPage(){
            if(this.page+1>this.total) return false;
            this.page++;
        },
    }

}
</script>
<style lang="scss">
.enterprise{
    width: 1200px;
    margin: 115px auto 166px;
    &-nav{
        width: 100%;
        display: flex;
        border-bottom: 1px solid  #424D5A;
        margin-bottom: 31px;
        .nav-title{
            font-size: 42px;
            line-height: 61px;
            color: #273443;
            margin-right: 80px;
            padding-bottom: 25px;
            font-weight: normal;
        }
        .navActive{
            position: relative;
        }
        .navActive::after{
            position: absolute;
            bottom: 0;
            left: 0;
            width: 168px;
            height: 8px;
            display: block;
            content: '';
            background: #E15100;;
        }
    }
    &-list{
        width: 100%;
        .enterprise-item{
            width: 100%;
            height: 205px;
            padding: 75px 0 70px;
            border-bottom: 1px solid #424D5A;
            @include display(center,between);
            &-left{
                width: 430px;
                height: 200px;
                margin-top: 5px;
            }
            &-right{
                width: 728px;
                .name{
                    @include display(top,between);
                    h1{
                        font-size: 30px;
                        color: #273443;
                        line-height: 43px;
                        width: 520px;
                        height: 86px;
                    }
                    p{
                        margin-top: 8px;
                        font-size: 24px;
                        color: #273443;
                        opacity: .5;
                        line-height: 35px;
                    }
                }
                .brief{
                    font-size: 24px;
                    color: #273443;
                    opacity: .5;
                    line-height: 35px;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    margin-top: 49px;
                }
            }
        }
    }
    .page-container{
        width: 100%;
        @include display(center,right);
        margin-top: 114px;
        .next,.pre{
            width: 60px;
            height: 60px;
            border: 1px solid #E15100;
            @include display(center,center);
            font-size: 22px;
            color: #E15100;
            margin-right: 28px;
            cursor: pointer;
        }
        .page{
            width:34px;
            margin: 0 5px;
            height: 60px;
            text-align: center;
            line-height: 60px;
            color: #000;
            font-size: 26px;
            opacity: .5;
            cursor: pointer;
        }
        .pageActive{
            color: #fff;
            background-color: #E15100;
        }
    }
}
</style>